<template>
  <div class="similar">
    <!--    歌手-->
    <div class="singer_box">
      <div class="singer_info" v-for="(item, index) in singers" :key="index">
        <img v-lazy="item.img1v1Url" @click="goRoute(item)" alt="">
        <div>{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {home} from "@/network/home";

export default {
  name: "SingerSimilar",
  data(){
    return {
      id:this.$route.params.id,
      singers:[],
    }
  },
  watch:{
    //监听歌手id是否变化，变化就更新数据
    '$route.params.id'(){
      //获取相似歌手数据
      this.getSingerSimilar(this.$route.params.id)
    },
  },
  created() {
    //获取相似歌手数据
    this.getSingerSimilar(this.id)
  },
  methods:{
    //点击歌手图片跳转到歌手详情页的方法
    goRoute(item){
      this.$router.push('/singer/' + item.id)
    },

    //获取相似歌手的函数
    getSingerSimilar(id){
      home.getSingerSimilar(id).then(res => {
        this.singers = res.data.artists
      })
    },
  },
}
</script>

<style scoped>
/*歌手信息*/
.singer_box{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding-bottom: 30px;
}
.singer_info{
  width: 180px;
  height: 200px;
  margin: 10px;
  text-align: center;
}
.singer_info div{
  font-size: 14px;
  line-height: 30px;
}
.singer_box img{
  width: 180px;
  height: 180px;
  border-radius: 5px;
  cursor: pointer;
}
</style>
